import React from 'react';
import './index.less'
import {Button,Table, Divider, Tag,Row, Col,Menu,Modal,Input,message} from "antd";
import axios from 'axios'
import {PATH,URL,IP} from '../../utils/urls'
import BreadcrumbCustom from '../../components/BreadcrumbCustom';
export default class index extends React.Component {
    constructor(props){
        super(props);
        this.state = {
            id:"",
            selectCellId:-1,//当前右键选中图id,
            areaSceneHardWareList:[],//接口中获取到设备列表
            svgArray:[],//在场景中的svg数组
            scenesArray:[],//左上角报警文字
        }
        this.moving = false;
        this.ws = null;
    }


    componentWillUnmount() {

    }

    componentDidMount() {
        console.log(this.props);
        //获取主底图资源
        this.getMainSceneFun();
        this.getAreaSceneCellListFun();
    }

    /**
     *获取当前区域场景的列表
     */
    getAreaSceneCellListFun(){
        axios.post(PATH.getSceneList,{
        }).then(response=>{
            console.log(response);
            if(response.data.code == 0){
                let dataArray = response.data.data;
                console.log(dataArray);
                for(let i = 0;i<dataArray.length;i++){
                    let src = dataArray[i].sceneImg;
                    let style = {width:120,height:88,left:parseInt(dataArray[i].locationX),top:parseInt(dataArray[i].locationY)};
                    let currentWidth = 120;
                    let statusStyle=null;
                    if(dataArray[i].sceneStatus == 0){
                        statusStyle = {color:'black'};
                    }else{
                        statusStyle = {color:'#09f309'};
                    }
                    this.state.areaSceneHardWareList.push({
                        ...dataArray[i],
                        src:src,
                        style:style,
                        currentWidth:currentWidth,
                        statusStyle:statusStyle
                    });
                }
                this.setState({
                    areaSceneHardWareList:this.state.areaSceneHardWareList
                })

                //获取区域场景列表
                this.getAreaSceneCellFun();
            }
        })
    }

    /**
     * 获取主底图资源
     * mainSceneImg
     * @returns {*}
     */
    getMainSceneFun=()=>{
        axios.get(PATH.getMineScene,{})
            .then(response=>{
                console.log(response);
                if(response.data.code == 0){
                    let areaMain = {
                        svgCell:<img src={URL+response.data.data.mainSceneImg} className="areaImg"/>,
                        id:-1
                    }
                    this.setState({
                        svgArray:[areaMain],
                        id:-1
                    })
                }else{
                    message.error(response.data.msg)
                }
            })
    }

    /**
     * 获取当前区域场景的元素
     */
    getAreaSceneCellFun(){
        axios.post(PATH.getAreaWarnList,{
            sceneStatus:1//1:启动，0为启用
        }).then(response=>{
            console.log(response);
            console.log(this.state);
            if(response.data.code == 0){
                let dataArray = response.data.data;
                for(let i = 0;i<dataArray.length;i++){
                    let style = {
                        left:parseInt(dataArray[i].locationX),
                        top:parseInt(dataArray[i].locationY),
                        position: "absolute",
                        width:dataArray[i].width,
                        height:dataArray[i].height,
                        border:"0px"
                    };
                    let index = this.getIndexById(dataArray[i].id);
                    this.state.areaSceneHardWareList[index].style = style;

                    //warnStatus 0 是正常 1 是预警
                    if(dataArray[i].warnStatus == 1){
                        this.state.areaSceneHardWareList[index].src = dataArray[i].sceneWarnIcon;
                    }else{
                        this.state.areaSceneHardWareList[index].src = dataArray[i].sceneImg;
                    }
                    let svgCell = <img title={dataArray[i].sceneName} className="areaSceneImg" id={dataArray[i].id} onMouseUp={this.onImgMouseUp} onClick={this.onClickCell.bind(this,dataArray[i])}
                                       src={this.state.areaSceneHardWareList[index].src} style={this.state.areaSceneHardWareList[index].style}/>;
                    this.state.svgArray.push({
                        svgCell:svgCell,
                        id:dataArray[i].id
                    });
                    //warnStatus 0 是正常 1 是预警
                    this.state.scenesArray.push({
                        num:(i+1)+"",name:dataArray[i].sceneName,status:dataArray[i].warnStatus
                    })



                    this.setState({
                        svgArray:this.state.svgArray
                    })
                }

                console.log(this.state);
            }
        })
    }

    /**
     * 点击区域场景
     */
    onClickCell=(props)=>{
        console.log(props);
        let path = {
            pathname:'areascenewarn',
            state:{
                sceneImg:props.sceneImg,
                id:props.id
            }
        }
        this.props.history.push(path);
    }


    /**
     * 通过设备列表id获取当前索引
     */
    getIndexById(id){
        let index = 0;
        for(let i = 0;i<this.state.areaSceneHardWareList.length;i++){
            if(this.state.areaSceneHardWareList[i].id == id){
                index = i;
                break;
            }
        }
        return index;
    }

    /**
     * 创建websocket，实时获取场景状态
     * @returns {*}
     */
    initWebSocket() {
        let that = this;
        // this.ws = new WebSocket("ws://"+this.state.hostname+"/websocket/sceneMonitor:" + localStorage.getItem("username"));
        this.ws = new WebSocket("ws://"+IP+"/websocket/sceneMonitor:" + localStorage.getItem("username"));
        this.ws.onopen = function (evt) {
            console.log("Connection open ...");
        };

        this.ws.onmessage = function (evt) {
            if (evt.data.indexOf("连接成功") < 0) {
                that.updateHareAndSoftData(JSON.parse(evt.data));
            }
        };

        this.ws.onclose = function (evt) {
            console.log("Connection closed.");
        };
    }

    /**
     * 根据websocket返回的数据，更新场景状态
     * @returns {*}
     */
    updateHareAndSoftData(updateData) {
        console.log(updateData);
    }

    render() {
        let redStyle={color:"#ff0000"};
        let greenStyle={color:"#00ff00"};
        console.log(this.state);
        return (
            <div draggable="true">
                <BreadcrumbCustom/>
                <div className="mainSceneAreaWarn">
                    <ul>
                        {
                            this.state.scenesArray.map((item,index)=>{
                                return(
                                    <li key={index}>
                                        <span >{item.num}</span>
                                        <span >、</span>
                                        <span className="sceneList">{item.name}</span>
                                        <span className="sceneList" style={item.status=="0"?greenStyle:redStyle}>{item.status=="0"?"正常":"警告"}</span>
                                    </li>
                                )
                            })
                        }
                    </ul>
                </div>
                <div id="wrap"  className="mainSceneAreaWarn">
                    {
                        this.state.svgArray.map((item,index)=>{
                            return(
                                <div key={index}  id="areaSceneId">{item.svgCell}</div>
                            )
                        })
                    }
                </div>

            </div>
        )
    }
}